<template>
    <div class="right-content">
        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
                <el-tab-pane label="拟办发文" name="write">
                  <el-form label-position="top" class="nbfw" label-width="100px" :model="nbfwfrom">
                    <el-form-item class="nbfwitem" label="发文号：">
                      <el-input class="nbfwinput" placeholder="请输入内容" v-model="nbfwfrom.gwnumber"></el-input>
                    </el-form-item>
                    <el-form-item class="nbfwitem" label="公文标题：">
                      <el-input class="nbfwinput" placeholder="请输入内容" v-model="nbfwfrom.gwtitle"></el-input>
                    </el-form-item>
                    <el-form-item class="nbfwitem2" label="公文类别：">
                      <el-input class="nbfwinput2" placeholder="请输入内容" v-model="nbfwfrom.gwtype"></el-input>
                    </el-form-item>
                    <el-form-item class="nbfwitem2" label="私密性：">
                      <el-input class="nbfwinput2" placeholder="请输入内容" v-model="nbfwfrom.gwsecrit"></el-input>
                    </el-form-item>
                    <el-form-item class="nbfwitem2" label="急缓：">
                      <el-input class="nbfwinput2" placeholder="请输入内容" v-model="nbfwfrom.gwlevel"></el-input>
                    </el-form-item>
                    <el-form-item class="nbfwitem2" label="是否经部门经理审批：">
                      <el-input class="nbfwinput2" placeholder="请输入内容" v-model="nbfwfrom.isjl"></el-input>
                    </el-form-item>
                    <el-form-item class="nbfwitem2" label="是否经行政主管审批：">
                      <el-input class="nbfwinput2" placeholder="请输入内容" v-model="nbfwfrom.iszg"></el-input>
                    </el-form-item>
                    <el-form-item class="nbfwitem2" label="是否经执行董事审批：">
                      <el-input class="nbfwinput2" placeholder="请输入内容" v-model="nbfwfrom.isds"></el-input>
                    </el-form-item>
                    <el-form-item class="nbfwitem" label="上传附件：">
                      <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                      </el-upload>
                    </el-form-item>
                    <el-form-item class="gwnr" label="公文内容：">
                      <el-input class="nbfwinput" placeholder="请输入内容" v-model="nbfwfrom.gwcontent"></el-input>
                    </el-form-item>
                  </el-form>
                  <div class="btn">
                    <el-button type="primary" @click="confrim">确定</el-button>
                    <el-button type="primary" @click="canxel">取消</el-button>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="红头文件模板" name="model">
                    <!-- <el-button type="primary" class="defineC" @click="cimsInputClick">定义流程</el-button> -->
                    <el-table
                    :data="tableData"
                    border
                    stripe
                    style="width: 97%; margin: 10px auto">
                    <el-table-column
                        prop="id"
                        header-align="center"
                        align="center"
                        width="120"
                        label="ID">
                    </el-table-column>
                    <el-table-column
                        prop="mTitle"
                        header-align="center"
                        align="center"
                        width="280"
                        label="模板标题">
                    </el-table-column>
                    <el-table-column
                        prop="mClass"
                        header-align="center"
                        align="center"
                        width="200"
                        label="分类">
                    </el-table-column>
                    <el-table-column
                        prop="useMan"
                        header-align="center"
                        align="center"
                        width="195"
                        :show-overflow-tooltip="true"
                        label="可使用人">
                    </el-table-column>
                    <el-table-column
                        prop="instruction"
                        header-align="center"
                        align="center"
                        width="190"
                        :show-overflow-tooltip="true"
                        label="说明">
                    </el-table-column>
                    <el-table-column
                        prop="operation"
                        header-align="center"
                        align="center"
                        width="190"
                        :show-overflow-tooltip="true"
                        label="操作">
                      <!-- <template slot-scope="scope">
                        <el-button type="primary" size='mini' @click="view(scope.row)">查看</el-button>
                      </template> -->
                    </el-table-column>
                    </el-table>
                    <!-- 分页器 -->
                    <div class="block" style="margin-top:15px; margin-right: 20px">
                    <el-pagination
                        align="right"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
                </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
  name: 'DocumentManagement',
  data() {
    return {
      nbfwfrom: {
        gwnumber: '',
        gwtitle: '',
        gwtype: '',
        gwsecrit: '',
        gwlevel: '',
        gwcontent: '',
        isjl: '',
        iszg: '',
        isds: ''
      },
      activeName: 'write',
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      // goodslist: [],
      total: 0,
      // ********************************************tableData****************************************
      tableData: [{
        id: '1',
        mTitle: '集团公司平行文模板',
        mClass: '红头模板',
        useMan: '执行董事',
        instruction: '暂无'
      },
      {
        id: '2',
        mTitle: '集团公司平行文模板',
        mClass: '红头模板',
        useMan: '执行董事',
        instruction: '暂无'
      },
      {
        id: '3',
        mTitle: '集团公司平行文模板',
        mClass: '红头模板',
        useMan: '执行董事',
        instruction: '暂无'
      },
      {
        id: '4',
        mTitle: '集团公司平行文模板',
        mClass: '红头模板',
        useMan: '执行董事',
        instruction: '暂无'
      },
      {
        id: '5',
        mTitle: '集团公司平行文模板',
        mClass: '红头模板',
        useMan: '执行董事',
        instruction: '暂无'
      },
      {
        id: '6',
        mTitle: '集团公司平行文模板',
        mClass: '红头模板',
        useMan: '执行董事',
        instruction: '暂无'
      },
      {
        id: '7',
        mTitle: '集团公司平行文模板',
        mClass: '红头模板',
        useMan: '执行董事',
        instruction: '暂无'
      },
      {
        id: '8',
        mTitle: '集团公司平行文模板',
        mClass: '红头模板',
        useMan: '执行董事',
        instruction: '暂无'
      },
      {
        id: '9',
        mTitle: '集团公司平行文模板',
        mClass: '红头模板',
        useMan: '执行董事',
        instruction: '暂无'
      },
      {
        id: '10',
        mTitle: '集团公司平行文模板',
        mClass: '红头模板',
        useMan: '执行董事',
        instruction: '暂无'
      }
      ]
    }
  },
  mounted() {
    this.getlogindataList()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    cimsInputClick() {
      window.location.href = 'http://localhost:8100/'
    }
    // 改变当前页码
    // handleCurrentChange(val) {
    //   this.currentPage = val
    //   this.getlogindataList()
    // },
    // // 获取登录日志选定页码的数据
    // getlogindataList() {
    //   this.getRequest('/log/login/' + this.currentPage + '/' + this.pageSize).then((resp) => {
    //     if (resp) {
    //       console.log(resp)
    //       this.total = resp.total
    //       this.logindataList = resp.list
    //     }
    //   })
    // }
  }
}
</script>

<style>
.btn{
  position: relative;
  top: -50px;
  left: 470px;
}
.gwnr{
  position: relative;
  top: -160px;
  left: 420px;
}
.nbfwitem{
  display: inline-block;
  margin-right: 230px;
}
.nbfwitem2{
  display: inline-block;
  margin-right: 120px;
}
.nbfwinput{
  width: 400px;
}
.nbfwinput2{
  width: 300px;
}
.right-content{
  border: px solid #fff;
  border-bottom: none;
  background-color: #fff;
  height: 100%;
  padding-left: 0px;
  margin-top: 0px;
}
.defineC{
  /* line-height: 30px; */
  /* height: 20px; */
  margin-left: 14px;
}
/* div{
  align-items: center;
} */
/* .el-form{
  margin-top: 0px;
} */
</style>
